<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import type { Component } from 'vue';
import { getPaletteColorByNumber, mixColor } from '@sa/color';
import { values } from 'lodash-es';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { loginModuleRecord } from '@/constants/app';
import bgPath from '@/assets/svg-icon/work.svg';
import PwdLogin from './modules/pwd-login.vue';
import CodeLogin from './modules/code-login.vue';
import Register from './modules/register.vue';
import ResetPwd from './modules/reset-pwd.vue';
import BindWechat from './modules/bind-wechat.vue';
interface Props {
  /** The login module */
  module?: UnionKey.LoginModule;
}

const props = defineProps<Props>();

const appStore = useAppStore();
const themeStore = useThemeStore();

interface LoginModule {
  label: string;
  component: Component;
}

const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
  // //loginModuleRecord['pwd-login']
  'pwd-login': { label: '欢迎使用本系统', component: PwdLogin },
  'code-login': { label: loginModuleRecord['code-login'], component: CodeLogin },
  register: { label: loginModuleRecord.register, component: Register },
  'reset-pwd': { label: loginModuleRecord['reset-pwd'], component: ResetPwd },
  'bind-wechat': { label: loginModuleRecord['bind-wechat'], component: BindWechat }
};

const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);

// const bgThemeColor = computed(() =>
//   themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
// );

const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';
  return themeStore.darkMode ? 'rgb(24, 24, 28)' : COLOR_WHITE;
});
const leftBg = computed(() => {
  return themeStore.darkMode ? 'max-height' : 'max-height dark bg';
});
const positionValue = ref<string>('right');
const positions = {
  left: '0 s:0 m:16 l:16 xl:16 2xl:16',
  right: '24 s:24 m:8 l:8 xl:8 2xl:8'
};
const position = reactive(positions);
const positionOptions = [
  {
    label: '左边',
    value: 'left'
  },
  {
    label: '右边',
    value: 'right'
  }
];
const switchPosition = (value: string) => {
  positionValue.value = value;
  // const position = positions[value];
  position = {
    left: position.left,
    right: position.right
  };
  // Object.assign(position, {
  //   left: '0 s:0 m:16 l:16 xl:16 2xl:16',
  //   right: '24 s:24 m:8 l:8 xl:8 2xl:8'
  // });
};
</script>

<!-- :style="{ backgroundColor: bgColor }" -->
<template>
  <div class="relative size-full flex-center overflow-hidden">
    <NSpace size="small" justify="end" class="position-absolute right-1.5rem top-1.5rem">
      <div
        class="flex flex-gap-2 b-rd-3xl rounded-full bg-gray-100 pb-.5rem pl-1rem pr-1rem pt-.5rem dark:bg-neutral-700"
      >
        <!--
 <NButton text secondary>
          <template #icon>
            <SvgIcon class="text-14px lt-sm:text-14px" icon="fluent-mdl2:column-left-two-thirds" />
          </template>
        </NButton>
-->
        <PositionSwitch :position="positionValue" text :position-options="positionOptions" @switch="switchPosition" />
        <ThemeSchemaSwitch
          text
          :theme-schema="themeStore.themeScheme"
          :show-tooltip="false"
          class="text-20px lt-sm:text-18px"
          @switch="themeStore.toggleThemeScheme"
        />
        <LangSwitch
          text
          :lang="appStore.locale"
          :lang-options="appStore.localeOptions"
          :show-tooltip="false"
          class="text-20px lt-sm:text-18px"
          @change-lang="appStore.changeLocale"
        />
      </div>
    </NSpace>
    <div class="position-absolute bottom-3px flex text-center text-xs text-gray-400">
      <div class="text-md flex-center" enable="true">
        Copyright © 2024
        <a href="#" class="mx-1 hover:text-primary-hover">XXX</a>
      </div>
    </div>
    <div class="position-absolute left-1.5rem top-1.5rem">
      <div class="flex flex-items-center">
        <SystemLogo class="mr-1 text-32px text-primary" />
        <div class="text-27px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</div>
      </div>
    </div>
    <NGrid cols="24" item-responsive responsive="screen">
      <NGridItem span="0 s:0 m:16 l:16 xl:16 2xl:16" :class="leftBg">
        <div class="right-box-content element mt-3rem h-full">
          <SvgIcon local-icon="login_bg" class="text-550px" />
        </div>
      </NGridItem>
      <NGridItem
        span="24 s:24 m:8 l:8 xl:8 2xl:8"
        class="max-height w-100% flex justify-center flex-items-center pb-2.5rem pl-2rem pr-2rem pt-2.5rem"
        :style="{ backgroundColor: bgColor }"
      >
        <div class="mb-5rem w-md">
          <div class="w-full">
            <NH3 class="pt-20px text-size-2.25rem font-bold font-medium">欢迎回来 👋🏻</NH3>
            <div class="pb-10px pt-10px text-14px text-#666 font-500 lt-sm:text-12px">
              还没有账号?
              <NA>创建账号</NA>
            </div>
            <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
              <NTabs
                :bar-width="100"
                type="segment"
                class="card-tabs"
                default-value="login"
                size="small"
                animated
                pane-wrapper-style="margin: 0 -4px;"
                pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
              >
                <NTabPane name="login" tab="账号">
                  <component :is="activeModule.component" />
                </NTabPane>
                <NTabPane name="phone" tab="手机号">
                  <component :is="CodeLogin" />
                </NTabPane>
              </NTabs>
            </Transition>
          </div>
        </div>
      </NGridItem>
    </NGrid>
  </div>
</template>

<style scoped>
.right-box-content {
  height: calc(100vh - 112px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.max-height {
  height: 100vh;
}
::v-deep(.n-tabs-rail) {
  width: 70% !important;
}
.bg {
  /* background-image: url('@/assets/imgs/v2_rnwhvj.png'); */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
  /* background: linear-gradient(
    154deg,
    rgba(7, 7, 9, 0.08235) 30%,
    hsl(var(216 20.11% 95.47%) / 10%) 48%,
    rgba(7, 7, 9, 0.08235) 64%
  ); */
}
.dark .bg {
  background: linear-gradient(
    154deg,
    rgba(7, 7, 9, 0.08235) 30%,
    hsl(212 100% 45% / 20%) 48%,
    rgba(7, 7, 9, 0.08235) 64%
  );
  filter: blur(100px);
  background-color: rgba(7, 7, 9, 1);
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.element {
  animation: bounce 5s linear 0ms infinite;
}
</style>
